import { createRef, useEffect, useMemo } from 'react'
import { useAppDispatch, useAppSelector } from '@redux/hook'
import { setList, setReady } from '@redux/reducers/pages'
import uuid from 'uuid'
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import PageView from '@components/pageView'
import UploadProgress from '@components/uploadProgress'
function Main () {
  const dispatch = useAppDispatch()
  const token = useAppSelector(state => state.basic.token)
  const userInfo = useAppSelector(state => state.basic.userInfo)
  const list = useAppSelector(state => state.pages.list)
  const ready = useAppSelector(state => state.pages.ready)
  const pages = useMemo(() => {
    return list.map(li => ({ ...li, ref: createRef() }))
  }, [list])
  useEffect(() => {
    if (!ready) {
      if (!token) {
        dispatch(setList([{ element: 'login', title: '登录', id: uuid() }]))
      } else if (userInfo.is_auth !== 1) {
        dispatch(setList([{ element: 'verification', title: '实名认证', id: uuid() }]))
      } else {
        if (list.length === 0) {
          // dispatch(setList([{element: 'home', title: '首页', id: uuid()  }]))
          dispatch(setList([{ element: 'admin', title: '首页', id: uuid() }]))
        }
      }
      // if (!token || !userInfo) {
      //   dispatch(setList([{ element: 'login', title: '登录', id: uuid() }]))
      // } else {
        
        // if (userInfo.is_auth === 1) {
          // dispatch(setList([
            // { element: 'admin', title: '首页', id: uuid() }, 
            // { element: 'verification', title: '实名认证', id: uuid() }, 
            // { element: 'modifyPassword', title: '修改密码', id: uuid() }, 
            // { element: 'caseDetail', title: '案件详情', meta: { id: '5A39B6ED85811BF6A9C9588F1AEF3964' }, id: uuid() },
            // { element: 'selectArbitrator', title: '案件详情', meta: { caseid: '5940CBEAC419E73F914421B0096C5259', id: '10EC813083FA266720BCBBD0A7C0A87A' }, id: uuid() },
            // { element: 'addCaseProtocol', meta: { }, id: uuid() },
            // { element: 'addCaseTypeSelect', meta: { }, id: uuid() },
            // { element: 'caseEdit', meta: { id: '49AC49C87AD5B50D74A3DC17F5B84067' }, id: uuid() },
            // { element: 'editParty', meta: { apply: true, id: 'DE5FD99FA5BEDCFC10A8CF912A3F50BD', caseid: '452CD7E8EFD0A51D5A8BD8DDE5A4FBCA' }, id: uuid() },
            // { element: 'editAgent', id: uuid(), meta: { apply: true, id: '87AF15DA9953FECE5F24495914F4FCD2', caseid: '452CD7E8EFD0A51D5A8BD8DDE5A4FBCA' } }
          // ]))
        // } else {
        //   h.replace('/verification')
          // dispatch(setList([{ element: 'login', title: '登录', id: uuid() }, { element: 'verification', title: '实名认证', id: uuid() }]))
        // }
      // }
      dispatch(setReady(true))
    }
  }, [token, userInfo, dispatch, ready, list])
  return (
  <div>
    <UploadProgress />
    <TransitionGroup className='item-list'>
      {
        pages.map((li, i) => (
          <CSSTransition key={li.id} nodeRef={li.ref} classNames='item' addEndListener={done => setTimeout(() => done(), 300)}>
            <div ref={li.ref}>
              <PageView key={i} element={li.element} title={li.title} meta={li.meta || {}} />
            </div>
          </CSSTransition>
        ))
      }
    </TransitionGroup>
  </div>
  )
}

export default Main
